body {
    flex-direction: column;
    justify-content: space-between;

    main {
        align-items: center;
        position: relative;
        width: auto;
        background: black;

        video {
            width: 100%;
        }

        .courseText {
            position: absolute;
            bottom: 3.6rem;
            left: 2.5rem;
            color: #fff;

            .degree {
                width: 10.2rem;
                height: 8.4rem;
                line-height: 8.4rem;
                font-size: 6rem;
                font-weight: 600;
            }

            .courseName {
                margin-top: 0.5rem;
                width: 10rem;
                height: 2.8rem;
                line-height: 2.8rem;
                font-size: 2rem;
            }
        }

    }

    footer {
        position: relative;
        height: 9rem;
        width: 100%;
        line-height: 9rem;

        .progress {
            position: absolute;
            top: 0;
            left: 0;
            // width: 0;
            height: 9rem;
            background: skyblue;
            z-index: 9;
        }

        .btn {
            justify-content: space-around;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3.5rem;
            z-index: 99;

            div {
                i {
                    font-size: 3.5rem !important;
                    color: #333333;
                }
            }
        }
    }

    .module {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: 100%;
        color: #fff;
        font-size: 2.2rem;
        background: rgba(42, 127, 238, 0.5);
        z-index: 9;
        .module1 {
            flex-direction: column;
            padding: 0 2.5rem;
            width: auto;
            height: 100%;
            width: auto;
            height: 100%;
            color: #fff;
            font-size: 2.2rem;
            background: rgba(42, 127, 238, 0.5);
        }
    }

}

.box {
    flex-direction: column;
    justify-content: center;
}

.moduleBtn {
    justify-content: space-around;

    .Btn {
        flex-direction: column;
        justify-content: center;
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
        background: red;
    }

    .Btn:last-child {
        background: green;
    }
}

.currentVideoTitle {
    // justify-content: center;
    height: 15rem;
    border: 0.5rem solid #f1f1f1;
    border-radius: 1.5rem;

    .currentVideoImg {
        width: 50%;
        height: 14rem;
    }

    .currentVideoName {

        height: 15rem;

        p {
            width: 100%;
        }
    }
}